<template>
    <!-- 客户管理模块-客户信息详情（个人）页面 -->
    <div class="fillcontain baseInfo">
        <!-- 标题 -->
        <div class="fastQuery">
            <el-row>
                <el-col :span="6" class="fastQuery_title">
                    <i class="el-icon-tickets"></i><span> 客户信息详情</span></el-col>
                <el-col :span="8"></el-col>
            </el-row>
        </div>
        <div class="contain">
            <el-form label-width="120px" class="search_container">
                <el-row class="mt20 common-box">
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="customerType">客户类别</label>
                        </el-col>
                        <el-col :span="16">
                            <el-select v-bind:disabled="customerDetail.customerType != '' " v-model="customerDetail.customerType">
                                <el-option v-for="customertype in customerType" :key="customertype.value" :label="customertype.label" :value="customertype.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="idType">证件类型</label>
                        </el-col>
                        <el-col :span="16">
                            <el-select disabled  v-model="customerDetail.idType">
                                <el-option v-for="idtype in idType" :key="idtype.value" :label="idtype.label" :value="idtype.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="idNo">证件号码</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled readonly v-model="customerDetail.idNo" placeholder="证件号码"></el-input>
                        </el-col>
                    </el-col>
                </el-row>
                <el-row class="common-box">
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="customerName">姓名</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled readonly placeholder="姓名" v-model="customerDetail.customerName"></el-input>
                        </el-col>
                    </el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="validityType">有效类型</label>
                        </el-col>
                        <el-col :span="16">
                            <el-select disabled v-model="customerDetail.validityType">
                                <el-option v-for="valType in validityType" :key="valType.value" :label="valType.label" :value="valType.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-col>
					<el-col :span="8">
					    <el-col :span="8" class="common-lab">
					        <label class="validityDate">有效期起始日</label>
					    </el-col>
					    <el-col :span="16">
					        <el-input disabled readonly placeholder="有效期起始日" v-model="customerDetail.startValidityDate"></el-input>
					    </el-col>
					</el-col>
                </el-row>
                <el-row class="common-box">
					<el-col :span="8">
					    <el-col :span="8" class="common-lab">
					        <label class="validityDate">有效期截止日</label>
					    </el-col>
					    <el-col :span="16">
					        <el-input disabled readonly placeholder="有效期截止日" v-model="customerDetail.validityDate"></el-input>
					    </el-col>
					</el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="birthday">出生日期</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled readonly placeholder="出生日期" v-model="customerDetail.birthday"></el-input>
                        </el-col>
                    </el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="sex">性别</label>
                        </el-col>
                        <el-col :span="16">
                            <el-select disabled v-model="customerDetail.sex">
                                <el-option v-for="valType in sexType" :key="valType.value" :label="valType.label" :value="valType.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-col>
                </el-row>
                <el-row class="common-box">
					<el-col :span="8">
					    <el-col :span="8" class="common-lab">
					        <label class="marryd">婚姻状况</label>
					    </el-col>
					    <el-col :span="16">
					        <el-select disabled v-model="customerDetail.marryd">
					            <el-option v-for="marrydtype in marrydType" :key="marrydtype.value" :label="marrydtype.label" :value="marrydtype.value">
					            </el-option>
					        </el-select>
					    </el-col>
					</el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="nationality">国籍/地区</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled readonly placeholder="" v-model="customerDetail.nationality"></el-input>
                        </el-col>
                    </el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="mobilePhoneOne">电话1</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled readonly placeholder="" v-model="customerDetail.mobilePhoneOne"></el-input>
                        </el-col>
                    </el-col>
                </el-row>
                <el-row class="common-box">
					<el-col :span="8">
					    <el-col :span="8" class="common-lab">
					        <label class="mobilePhoneTwo">电话2</label>
					    </el-col>
					    <el-col :span="16">
					        <el-input disabled readonly placeholder="" v-model="customerDetail.mobilePhoneTwo"></el-input>
					    </el-col>
					</el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="fixedTelephone">移动电话</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled readonly placeholder="" v-model="customerDetail.fixedTelephone"></el-input>
                        </el-col>
                    </el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="rdidtelno">其他电话</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled readonly placeholder="" v-model="customerDetail.rdidtelno"></el-input>
                        </el-col>
                    </el-col>
                </el-row>
                <el-row class="common-box">
					<el-col :span="8">
					    <el-col :span="8" class="common-lab">
					        <label class="cltpcode">邮编区号</label>
					    </el-col>
					    <el-col :span="16">
					        <el-input disabled readonly placeholder="" v-model="customerDetail.cltpcode"></el-input>
					    </el-col>
					</el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="riskLevel">风险等级</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled readonly placeholder="" v-model="customerDetail.riskLevel"></el-input>
                        </el-col>
                    </el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="email">E-mail</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled readonly placeholder="" v-model="customerDetail.email"></el-input>
                        </el-col>
                    </el-col>
                    
                </el-row>
                <el-row class="common-box">
					<el-col :span="8">
					    <el-col :span="8" class="common-lab">
					        <label class="shippingMethod">信函寄送方式</label>
					    </el-col>
					    <el-col :span="16">
					         <el-select disabled v-model="customerDetail.shippingMethod" placeholder="请选择">
					            <el-option v-for="item in methodType" :key="item.value" :label="item.label" :value="item.value">
					            </el-option>
					        </el-select>
					    </el-col>
					</el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="professionalLevel">职业等级</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled readonly placeholder="" v-model="customerDetail.professionalLevel"></el-input>
                        </el-col>
                    </el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="customerRiskValue">客户风险评测分值</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled readonly placeholder="" v-model="customerDetail.customerRiskValue"></el-input>
                        </el-col>
                    </el-col>
                </el-row>
                <el-row class="common-box">
					<el-col :span="8">
					    <el-col :span="8" class="common-lab">
					        <label class="reason">风险等级原因</label>
					    </el-col>
					    <el-col :span="16">
					        <el-input disabled readonly placeholder="" v-model="customerDetail.reason"></el-input>
					    </el-col>
					</el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="occpCode">职业信息</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled readonly placeholder="" v-model="customerDetail.occpCode"></el-input>
                        </el-col>
                    </el-col>
                    <el-col :span="8">
                        <el-col :span="8" class="common-lab">
                            <label class="postalAddress">收费地址</label>
                        </el-col>
                        <el-col :span="16">
                            <el-input disabled readonly placeholder="" v-model="customerDetail.postalAddress"></el-input>
                        </el-col>
                    </el-col>
                </el-row>
                <el-row class="mt20">
                    <el-col :span="12" class="text_right pr20">
                        <el-button type="danger" class="Defaultbutton" @click="getIndividualTax()">个人税收居民身份声明文件</el-button>
                    </el-col>
                    <el-col :span="12">
                        <el-button type="danger" @click="back">返回</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>
<script>
    import { mapState, mapGetters } from 'vuex'
    import manageConstants from '@/utils/manageConstants.js';
    import constant from '@/utils/constant';
    import { getCustomerInfoDetail } from "@/api/customermanage/customerManage.js";
    export default {
        data() {
            return {
                customerType: manageConstants.customerType,
                idType: manageConstants.idType,
                validityType: manageConstants.validityType,
                marrydType: manageConstants.marrydType,
                customerNo: '',
                sexType: manageConstants.sexType,
                methodType: manageConstants.methodType,
                customerDetail: []
            }

        },
        created() {
            //页面初始化方法
            this.getCustomerInfo();
        },
        mounted() { //页面初始化方法
            // this.customerNo = this.$route.query.customerNo;
            // this.getCustomerInfo();
        },
        methods: {
            //查客户详情
            getCustomerInfo() {
                this.customerNo = this.$route.query.customerNo;
                this.$store.dispatch('loading/CHNAGE_SUBLOADING', true)
                let params = {
                    customerNo: this.customerNo
                }
                getCustomerInfoDetail(params).then(res => {
                    this.$store.dispatch('loading/CHNAGE_SUBLOADING', false)
                    if (res.resultCode == constant.SUCCESS && res.data) {
                        this.customerDetail = res.data;
                    }
                    this.$emit('checkData', this.tableData.length > 0 ? true : false)
                }).catch(err => {
                    this.$emit('checkData', false)
                    this.$store.dispatch('loading/CHNAGE_SUBLOADING', false)
                })
            },
            getIndividualTax() {
                this.$router.push({
                    path: "/customer/customerTaxFile", query: {
                        clntnum: this.customerNo,
                        reload: true
                    }
                })

            },
            back() {
                this.$router.go(-1);//返回上一层
            },
        },
        watch: {
            "$route":{
              handler(route){
                  if(route.query.customerNo != undefined && route.query.customerNo != this.customerNo){
                    this.getCustomerInfo();
                  }
              }
            }
        }
    }

</script>

<style lang="less" scoped>
    .fillcontain {
        padding-bottom: 0;

        .fastQuery {
            padding: 15px 20px 10px 20px;
            background: #fff;
            border-bottom: 1px solid #e1e1e1;

            .fastQuery_title {
                color: #666;
                padding: 6px 0px;
            }
        }
    }

    .contain {
        background: #fff;
        padding: 10px;
        margin-bottom: 20px;
    }

    .common-box {
        padding-bottom: 15px;
    }

    .common-lab {
        line-height: normal!important;
        text-align: right;
        .labelName {
            text-align: right;
        }
    }
</style>